const jigsaw = require('../utils/jigsaw');

class JigsawCode {
    constructor(props) {
        this.config = this.objectAssign(props);
    }

    // 创建
    create = _ => {
        this.createElement(this.config);
        jigsaw.init({
            option : this.config,
            el: document.getElementById('captcha'),
            onSuccess: () => {
                // 登录成功
                jigsaw.isUp();
                // 回调方法
                this.config.success();
            },
            onError : () => {
                // 失败回调
                this.config.error();
            }
        });
    };

    // 刷新
    refresh = _ => {
        let {id} = this.config;
        document.getElementById(id).innerHTML = '';
        return this.create();
    };
}

// TODO 创建 html css
JigsawCode.prototype.createElement = data => {
    return new Promise(resolve => {
        let {dom, id, width, beforeColor, fontColor, fontSize} = data;
        let style = document.createElement('style');
        style.innerHTML = '' +
            '.block {\n' +
            '            position: absolute;\n' +
            '            left: 0;\n' +
            '            top: 0;\n' +
            '        }\n' +
            '\n' +
            '        .sliderContainer {\n' +
            '            font-size: '+ fontSize +'px;\n'+
            '            position: relative;\n' +
            '            text-align: center;\n' +
            '            width: '+ width +'px;\n' +
            '            height: 40px;\n' +
            '            line-height: 40px;\n' +
            '            background: '+ beforeColor +';\n' +
            '            color: '+ fontColor +';\n' +
            '            border: 1px solid #e4e7eb;\n' +
            '        }\n' +
            '\n' +
            '        .sliderContainer_active .slider {\n' +
            '            height: 38px;\n' +
            '            top: -1px;\n' +
            '            border: 1px solid #1991FA;\n' +
            '        }\n' +
            '\n' +
            '        .sliderContainer_active .sliderMask {\n' +
            '            height: 38px;\n' +
            '            border-width: 1px;\n' +
            '        }\n' +
            '\n' +
            '        .sliderContainer_success .slider {\n' +
            '            height: 38px;\n' +
            '            top: -1px;\n' +
            '            border: 1px solid #52CCBA;\n' +
            '            background-color: #52CCBA !important;\n' +
            '        }\n' +
            '\n' +
            '        .sliderContainer_success .sliderMask {\n' +
            '            height: 38px;\n' +
            '            border: 1px solid #52CCBA;\n' +
            '            background-color: #D2F4EF;\n' +
            '        }\n' +
            '\n' +
            '        .sliderContainer_success .sliderIcon {\n' +
            '            background-position: 0 0 !important;\n' +
            '        }\n' +
            '\n' +
            '        .sliderContainer_fail .slider {\n' +
            '            height: 38px;\n' +
            '            top: -1px;\n' +
            '            border: 1px solid #f57a7a;\n' +
            '            background-color: #f57a7a !important;\n' +
            '        }\n' +
            '\n' +
            '        .sliderContainer_fail .sliderMask {\n' +
            '            height: 38px;\n' +
            '            border: 1px solid #f57a7a;\n' +
            '            background-color: #fce1e1;\n' +
            '        }\n' +
            '\n' +
            '        .sliderContainer_fail .sliderIcon {\n' +
            '            top: 14px;\n' +
            '            background-position: 0 -82px !important;\n' +
            '        }\n' +
            '        .sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {\n' +
            '            display: none;\n' +
            '        }\n' +
            '\n' +
            '        .sliderMask {\n' +
            '            position: absolute;\n' +
            '            left: 0;\n' +
            '            top: 0;\n' +
            '            height: 40px;\n' +
            '            border: 0 solid #1991FA;\n' +
            '            background: #D1E9FE;\n' +
            '        }\n' +
            '\n' +
            '        .slider {\n' +
            '            position: absolute;\n' +
            '            top: 0;\n' +
            '            left: 0;\n' +
            '            width: 40px;\n' +
            '            height: 40px;\n' +
            '            background: #fff;\n' +
            '            box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n' +
            '            cursor: pointer;\n' +
            '            transition: background .2s linear;\n' +
            '        }\n' +
            '\n' +
            '        .slider:hover {\n' +
            '            background: #1991FA;\n' +
            '        }\n' +
            '\n' +
            '        .slider:hover .sliderIcon {\n' +
            '            background-position: 0 -13px;\n' +
            '        }\n' +
            '\n' +
            '        .sliderIcon {\n' +
            '            position: absolute;\n' +
            '            top: 15px;\n' +
            '            left: 13px;\n' +
            '            width: 14px;\n' +
            '            height: 12px;\n' +
            '            background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -26px;\n' +
            '            background-size: 34px 471px;\n' +
            '        }\n' +
            '\n' +
            '        .container {\n' +
            '            width: '+ width +'px;\n' +
            '        }';
        let divBody = document.createElement('div');
        divBody.setAttribute('id', id);
        divBody.innerHTML = '' +
            '<div class="container">\n' +
            '    <div id="captcha"></div>\n' +
            '</div>';
        document.getElementsByTagName("head").item(0).appendChild(style);
        dom.appendChild(divBody);
        resolve(true);
    });
};

// TODO 合并配置
JigsawCode.prototype.objectAssign = (props) => {
    if(!props || typeof props !== 'object'){
        props = {}
    }
    let config = {
        // [非必传] 宽度 [ int ]
        width : 310,
        // [非必传] 高度  [ int ]
        height : 200,
        // [非必传] 未滑动的背景色  [ string ]
        beforeColor : '#e8e8e8',  // 未滑动的背景色
        // [非必传] 文字颜色 [ string ]
        fontColor : '#000',  // 文字颜色
        // [非必传] 文字大小 [ int ]
        fontSize : 14,  // 文字大小
        // [非必传] 失败回调函数 每次滑动失败都会有一次调用 [ function ]
        error : function () {}
    };
    if(!props.dom){
        console.error('dom元素不正确，已自动切换至body标签！');
        props.dom = document.getElementsByTagName('body')[0];
    }

    if(!props.id || typeof props.id !== 'string'){
        props.id = 'A_' + new Date().getTime();
        console.error(`id值不存在或不是一个字符串类型，已自动生成值为：${props.id}`);
    }

    if(!props.success || typeof props.success !== 'function'){
        props.success = () => {
            console.error('当前滑动已成功，但没有设置成功的回调函数！');
        };
        console.error(`success字段不存在或不是一个函数！`);
    }
    return Object.assign(config, props)
};

module.exports = JigsawCode;
